<template>
  <div class="inf_basic">
    <div class="title_h4">
      <h4 class="title_inf">全部应用</h4>
    </div>
    <div style="display: flex; gap: 5px; justify-content: flex-end; margin-top: 10px">
      <el-input
        v-model.trim="name"
        style="width: 140px"
        placeholder="请输入应用名称搜索"
        clearable
        @keyup.enter="onShowSysUpgrade"
        @clear="onShowSysUpgrade"
      />
      <HButton type="primary" @click="onShowSysUpgrade">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </HButton>
      <HButton @click="onShowSysUpgrade">
        <el-icon>
          <RefreshRight />
        </el-icon>
        重置
      </HButton>
    </div>
    <div class="table">
      <el-table
        border
        stripe
        resizable
        :data="tableData"
        height="100%"
        style="width: 100%; position: absolute"
      >
        <el-table-column show-overflow-tooltip type="index" label="序号" width="50" />
        <el-table-column show-overflow-tooltip prop="date" label="应用名称" width="200" />
        <el-table-column show-overflow-tooltip prop="name" label="应用描述" width="200" />
        <el-table-column show-overflow-tooltip prop="state" label="所属分类" width="120" />
        <el-table-column show-overflow-tooltip prop="city" label="添加时间" width="120" />
        <el-table-column show-overflow-tooltip prop="city" label="到期时间" />
        <el-table-column show-overflow-tooltip prop="date" label="最后更新时间" width="200" />
        <el-table-column show-overflow-tooltip prop="date" fixed="right" label="操作" width="120">
          <div>
            <el-space :size="0" :spacer="spacer">
              <HLink @click="onShowSysUpgrade"> 前往应用 </HLink>
              <HLink @click="onShowSysUpgrade">详情</HLink>
            </el-space>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <Pagination />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, h } from 'vue'
  import Pagination from '@/components/Pagination/index.vue'
  import { RefreshRight } from '@element-plus/icons-vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HLink from '@/components/common/link/HLink.vue'
  import { ElDivider, ElMessage } from 'element-plus'

  const onShowSysUpgrade = () => {
    ElMessage({
      type: 'success',
      message: '正在升级维护中，敬请期待...',
    })
  }

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  const tableData = [
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: '广西壮族自治区-百色市-隆林各族自治县--东门东街道18号',
      tag: 'Home',
    },
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
  const name = ref('')
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
